<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单查询</title>
    <style>
        *, *:before, *:after {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fef5f5;
        }
        .container {
            max-width: min(90vw, 500px);
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 min(0.533vw, 2px) min(1.333vw, 5px) rgba(0, 0, 0, 0.1);
            border-radius: min(2.133vw, 8px);
        }
        .header {
            height: min(44.8vw, 268.8px);
            background: url(./image/bg-LCpTZXHx.png) no-repeat;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            padding: 0 min(2.667vw, 16px);
            overflow: hidden;
        }

        .header h1 {
            margin: 0;
            margin-top: min(6.4vw, 30px);
            margin-bottom: min(3.2vw, 10px);
            font-size: min(8vw, 30px);
        }

        .form-group {
            padding: min(2.667vw, 16px);
            display: flex;
            align-items: center;
        }
        .search {
            width: calc(100% - min(32vw, 40px));
            height: min(12vw, 48px);
            padding: min(2.133vw, 12.8px);
            font-size: min(4vw, 18px);
            border: 1px solid #ddd;
            border-radius: min(5.333vw, 32px);
        }
        input:focus {
            outline: none;
        }
        .form-group button {
            width: min(16vw, 96px);
            height: min(12vw, 48px);
            text-align: center;
            background-color: #fff;
            color: #000;
            font-size: min(3.2vw, 19.2px);
            border-radius: min(2.133vw, 12.8px);
            border: none;
            cursor: pointer;
            margin-left: min(2.667vw, 10px);
        }
        .result {
            padding: min(2.667vw, 16px);
        }
        .order-container {
            font-size: min(4vw, 14px);
            gap: min(1.333vw, 5px);
            margin: min(5.333vw, 20px) auto;
            padding: min(4vw, 15px);
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: min(2.133vw, 8px);
            box-shadow: 0 min(0.533vw, 2px) min(1.067vw, 4px) rgba(0, 0, 0, 0.1);
        }

        .order-image {
            width: min(26.667vw, 100px);
            height: min(26.667vw, 100px);
            margin-top: min(2.667vw, 10px);
        }

        .order-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: min(1.067vw, 4px);
        }

        .order-details {
            flex: 1;
        }

        .order-details p {
            margin: min(1.333vw, 5px) 0;
            font-size: min(3.733vw, 16px); /* 更灵活的字体自适应 */
            color: #333;
        }

        .order-container .order-number {
            margin: min(1.333vw, 5px);
            font-weight: bold;
            font-size: min(3.733vw, 16px); /* 同步调整字体大小 */
        }

        .order-container .product-price {
            font-size: min(3.733vw, 16px); /* 调整价格字体 */
            color: #e74c3c;
            font-weight: bold;
            float: right;
        }

        .order-details .status {
            font-size: min(3.733vw, 16px); /* 订单状态字体 */
            color: #27ae60;
            font-weight: bold;
        }

        .order-details .quantity {
            font-size: min(3.733vw, 16px); /* 数量的字体 */
            color: #555;
        }
        .order-flex {
            display: flex;
            gap: min(2.667vw, 10px);
        }
        .order-name {
            font-weight: bold;
        }

        .notice {
            padding: min(5.333vw, 32px);
        }
        .w-full {
            width: 100%;
        }
        .h-400px {
            height: min(106.667vw, 640px);
        }
        .empty {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>订单查询</h1>
            <div class="form-group">
                <input type="text" class="search" id="orderNumber" placeholder="请输入订单号">
                <button id="queryButton">查询</button>
            </div>
        </div>
        <img src="./image/image.png" alt="" class="empty" id="empty" style="display: block;">
        <div class="result" id="result" style="display: none;">
            <div class="order-container">
                <p class="order-number">订单号：305483772493<span class="product-price">商品原价：¥3269.2</span></p>
                <div class="order-flex">
                    <div class="order-image">
                        <img src="http://img11.360buyimg.com/n0/jfs/t1/195152/29/52500/103886/673713a6Fc70958f4/c8c98768213b1c56.png" alt="Product Image">
                    </div>
                    <div class="order-details">
                        <p class="order-name">追觅【增强版】S30Pro Ultra 上下水版扫地机器人洗拖扫拖一体自动清洗全自动基站自清洁【单独模块】</p>
                        <p>下单时间：2024-11-11 20:27:13</p>
                        <p>付款时间：2024-11-17 17:26:51</p>
                        <p class="status">订单状态：恭喜跟团成功</p>
                        <p class="quantity">数量：1</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="notice">
            <img src="./image/message-taJfCem-.png" alt="" class="w-full h-400px">
        </div>
    </div>

    <script>
        document.getElementById('queryButton').addEventListener('click', function () {
            const orderNumber = document.getElementById('orderNumber').value;

            if (orderNumber.trim() === "305483772493") { // Mock condition
                document.getElementById('result').style.display = 'block';
                document.getElementById('empty').style.display = 'none';
            } else {
                alert('订单号不存在或输入有误，请重新输入！');
            }
        });
    </script>
</body>
</html>
